<template>
  <div class="info-wrap">
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">

      <div class="flex-center">
        <Title title="资源信息" style="margin:32px 0 8px 0" font-size="16px"/>
        <editBtn v-if="hasRouteAuth('medium:dataEdit:createInfo') && detailInfo.isEditAuth && isNewVersion" @handleClick="editModule"/>
      </div>
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="8">
          <el-form-item label="账号：">
            <ToolTip :content="handleContent(detailInfo.resourceName)" :tool-tip="detailInfo.resourceName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账号ID：">
            <ToolTip :content="handleContent(detailInfo.resourceId)" :tool-tip="detailInfo.resourceId"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="链接：">
            <ToolTip :content="handleContent(detailInfo.resourceLink)" :tool-tip="detailInfo.resourceLink"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运营模式：">
            <ToolTip :content="handleContent(detailInfo.operateModeFullName)" :tool-tip="detailInfo.operateModeFullName"/>
          </el-form-item>
        </el-col>
        <el-col v-if="!showMobilePage" :span="8">
          <div style="border-right:1px solid #EBEEFD" class="fill"/>
        </el-col>
        <el-col v-if="!showMobilePage" :span="8" class="fill"/>
        <el-col :span="8">
          <el-form-item label="其他运营人员：">
            <template>
              <div v-if="showAll">
                <span>{{ handleArrayContent(detailInfo.accountOperation, 'value') }}</span>
                <span class="link" @click="openOperatorDialog">查看全部</span>
              </div>
              <CheckUserInfo
                v-else
                :user-list="detailInfo.accountOperation"
                :multiple="detailInfo.accountOperation && detailInfo.accountOperation.length > 1"
                :user-id="detailInfo.accountOperation && detailInfo.accountOperation.length === 1?detailInfo.accountOperation[0].id:null"
                :label="detailInfo.accountOperation && detailInfo.accountOperation.length === 1?detailInfo.accountOperation[0].value:null"
                key-name="id"
                label-name="value"
              />
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所有人员：" class="rel">
            <tipIcon class="tip-icon" content="账号的创建人、签单签约经纪、现维护经纪人、跟进人、达人运营、执行经纪等人员"/>
            <CheckUserInfo
              :user-list="detailInfo.totalOperation"
              :multiple="detailInfo.totalOperation && detailInfo.totalOperation.length > 1"
              :user-id="detailInfo.totalOperation && detailInfo.totalOperation.length === 1?detailInfo.totalOperation[0].id:null"
              :label="detailInfo.totalOperation && detailInfo.totalOperation.length === 1?detailInfo.totalOperation[0].value:null"
              key-name="id"
              label-name="value"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属经营体：">
            <ToolTip :content="detailInfo.attributionMatrixName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合作运营方：">
            <ToolTip :content="handleContent(detailInfo.cooperation)" :class="{'link':detailInfo.channelId}" :tool-tip="detailInfo.cooperation" @click.native="toSupplierDetail(detailInfo.channelId)"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商类型：">
            <div v-if="detailInfo.supplierType !== null">{{ detailInfo.supplierType | getSupplierType }}</div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否挂靠：">
            {{ microTaskFilter(detailInfo.microTask) || '--' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="协作部门：">
            <el-tooltip v-if="detailInfo.cooperationDepartmentNames" :open-delay="800" placement="top-start" effect="dark">
              <div slot="content" style="max-width:300px">
                <div v-for="(item,index) in deptFullNames" :key="index">{{ item }}</div>
              </div>
              <div>{{ handleContent(detailInfo.cooperationDepartmentNames) }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签：">
            <TagSelect v-model="detailInfo.tag" mode="detail" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="内容标签：">
            <ToolTip :content="detailInfo.additionalKey.tagRemark"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="跟进人：">
            <div v-if="showAllFollows">
              <span>{{ handleArrayContent(detailInfo.followUsers) }}</span>
              <span class="link" @click="openFollowDialog">查看全部</span>
            </div>
            <CheckUserInfo
              v-else
              :user-list="detailInfo.followUsers"
              :multiple="detailInfo.followUsers && detailInfo.followUsers.length > 1"
              :user-id="detailInfo.followUsers && detailInfo.followUsers.length === 1?detailInfo.followUsers[0].id:null"
              :label="detailInfo.followUsers && detailInfo.followUsers.length === 1?detailInfo.followUsers[0].name:null"
              key-name="id"
              label-name="name"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否新号：">
            <ToolTip :content="newAccountMap(detailInfo.additionalKey.isNewAccount)"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <operatorDialog ref="operatorDialog" :is-mobile="showMobilePage" :user-list="detailInfo.accountOperation"/>
    <operatorDialog ref="followDialog" :is-mobile="showMobilePage" :user-list="detailInfo.followUsers" :title="'跟进人'" :value-name="'name'"/>
  </div>
</template>
<script>
import Title from '@/components/Title';
import platformIcon from '@/components/Common/platformIcon';
import TagSelect from '@/components/Common/tagSelect';
import operatorDialog from './operatorDialog';
import { mapState } from 'vuex';
import { getSupplierType } from '@/filters/status';
import mixins from './mixins';

export default {
  filters: { getSupplierType },
  components: {
    Title,
    platformIcon,
    operatorDialog,
    TagSelect
  },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    },
    deptFullNames: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    showAllFollows() {
      return this.detailInfo.followUsers && this.detailInfo.followUsers.length > 3;
    },
    showAll() {
      return this.detailInfo.accountOperation && this.detailInfo.accountOperation.length > 3;
    }
  },
  created() {
    this.resourceId = Number(this.$route.params.resourceId) || '';
  },
  methods: {
    handleContent(content) {
      if (!content) return '';
      if (content.length > 16) {
        return content.slice(0, 16) + '...';
      }
      return content;
    },
    openOperatorDialog() {
      this.$refs['operatorDialog'].openDialog();
    },
    openFollowDialog() {
      this.$refs['followDialog'].openDialog();
    },
    handleArrayContent(arr = [], key = 'name') {
      if (arr.length === 0) {
        return '--';
      }
      let names = [];
      names = arr.map(j => j[key]);
      if (names.length > 3) {
        return `${names.slice(0, 3).join('、').substring(0, 16)}...`;
      }
      return names.join('、');
    },
    // 跳转销售供应商
    toSupplierDetail(channelId = null) {
      if (channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: channelId }
        });
        window.open(url.href, '_blank');
      }
    },
    microTaskFilter(task) {
      return task ? '是' : '否';
    },
    newAccountMap(data) {
      return {
        1: '是',
        0: '否'
      }[data];
    }
  }
};
</script>
<style scoped lang="scss">
.fill{
  height: 32px;
}
.link{
  color: #406EFF;
  cursor: pointer;
}
.tip-icon {
  position: absolute;
  left: -100px;
  top: 9px;
}
</style>
